<!-- src/components/MogelMotteGame.vue -->
<template>
    <div class="mogel-motte-container">
        <div class="game-header">
            <h1>Mogel Motte - 作弊飞蛾</h1>
            <div class="game-info">
                <span>守卫虫: {{ guardianPlayer?.name || '无' }}</span>
                <span>当前回合: {{ currentTurn }}</span>
            </div>
        </div>

        <div class="game-board">
            <!-- 中央牌堆和出牌区 -->
            <div class="center-area">
                <div class="deck-area">
                    <div class="deck" @click="drawCardForCurrentPlayer">
                        <div class="card-count">{{ drawPile.length }}</div>
                        <div class="deck-label">牌堆</div>
                    </div>

                    <div v-if="discardPile.length > 0" class="discard-pile">
                        <div v-for="(card, index) in discardPile.slice(-3)" :key="card.id" class="discard-card"
                            :style="{ transform: `translateX(${-index * 5}px) translateY(${-index * 3}px)` }">
                            <CardComponent :card="card" />
                        </div>
                    </div>
                </div>

                <!-- 行动指示 -->
                <div v-if="pendingAction" class="action-prompt">
                    <div class="action-message">
                        <template v-if="pendingAction.type === 'ant'">
                            其他玩家需要抽一张牌！
                        </template>
                        <template v-else-if="pendingAction.type === 'spider'">
                            选择一位玩家赠送一张牌
                        </template>
                        <template v-else-if="pendingAction.type === 'mosquito'">
                            快速点击！最后一个点击的人将接收牌
                        </template>
                        <template v-else-if="pendingAction.type === 'cockroach'">
                            找出与 {{ pendingAction.targetValue }} 相同的牌！
                        </template>
                    </div>
                </div>
            </div>

            <!-- 玩家区域 -->
            <div class="players-area">
                <div v-for="player in players" :key="player.id" class="player" :class="{
                    'current': player.id === currentPlayer?.id,
                    'guardian': player.id === guardianPlayer?.id,
                    'active': isActivePlayer(player)
                }">
                    <div class="player-header">
                        <h3>{{ player.name }}</h3>
                        <div v-if="player.id === guardianPlayer?.id" class="guardian-badge">
                            守卫虫
                        </div>
                        <div class="hand-count">手牌: {{ player.hand.length }}</div>
                    </div>

                    <div class="player-hand">
                        <!-- 玩家手牌 -->
                        <div v-for="card in player.hand" :key="card.id" class="player-card" :class="{
                            'selectable': canPlayCard(card, player),
                            'selected': selectedCards.includes(card),
                            'moth': card.type === 'moth',
                            'action': card.type === 'action',
                            'number': card.type === 'number'
                        }" @click="selectCard(card, player)">
                            <CardComponent :card="card" />
                        </div>

                        <!-- 作弊按钮 -->
                        <div v-if="player.id !== guardianPlayer?.id" class="cheat-actions">
                            <button class="cheat-button" @click="attemptCheat(player)">
                                作弊
                            </button>
                        </div>
                    </div>

                    <!-- 守卫虫操作 -->
                    <div v-if="player.id === guardianPlayer?.id" class="guardian-actions">
                        <button class="accuse-button" @click="accusePlayer">
                            指控作弊
                        </button>
                    </div>
                </div>
            </div>

            <!-- 游戏控制 -->
            <div class="game-controls">
                <button v-if="gameState === 'setup'" @click="startGame">
                    开始游戏
                </button>

                <button v-if="pendingAction && pendingAction.type === 'mosquito'" @click="handleMosquitoClick">
                    点击！
                </button>

                <button v-if="canPlaySelectedCards" @click="playSelectedCards">
                    出牌
                </button>

                <button @click="resetGame">
                    重置游戏
                </button>
            </div>

            <!-- 游戏日志 -->
            <div class="game-log">
                <h3>游戏日志</h3>
                <div class="log-entries">
                    <div v-for="(entry, index) in gameLog" :key="index" class="log-entry">
                        {{ entry }}
                    </div>
                </div>
            </div>
        </div>

        <!-- 守卫虫指控弹窗 -->
        <div v-if="showAccuseModal" class="modal-overlay">
            <div class="modal-content">
                <h3>选择要指控的玩家</h3>
                <div class="accuse-players">
                    <div v-for="player in nonGuardianPlayers" :key="player.id" class="accuse-player"
                        @click="confirmAccusation(player)">
                        {{ player.name }}
                    </div>
                </div>
                <button @click="cancelAccusation">取消</button>
            </div>
        </div>

        <!-- 蜘蛛牌选择弹窗 -->
        <div v-if="showSpiderModal" class="modal-overlay">
            <div class="modal-content">
                <h3>选择要赠送牌的玩家</h3>
                <div class="spider-players">
                    <div v-for="player in players" v-show="player.id !== currentPlayer?.id" :key="player.id"
                        class="spider-player" @click="selectSpiderTarget(player)">
                        {{ player.name }}
                    </div>
                </div>
                <button @click="cancelSpiderSelection">取消</button>
            </div>
        </div>

        <!-- 游戏结束弹窗 -->
        <div v-if="gameState === 'gameOver'" class="game-over-modal">
            <div class="modal-content">
                <h2>游戏结束!</h2>
                <div class="final-scores">
                    <div v-for="player in sortedPlayers" :key="player.id" class="player-score-final">
                        {{ player.name }}: {{ calculateScore(player) }} 分
                    </div>
                </div>
                <button @click="resetGame">重新开始</button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted } from 'vue'
import CardComponent from './CardComponent.vue'

// 定义类型
type CardType = 'number' | 'action' | 'moth'
type ActionType = 'ant' | 'spider' | 'mosquito' | 'cockroach'

interface CARD {
    id: number
    value: number
    type: CardType
    actionType?: ActionType
}

interface PLAYER {
    id: number
    name: string
    hand: CARD[]
    hasCheated: boolean
}

interface PENDING_ACTION {
    type: ActionType
    sourcePlayer: PLAYER
    targetValue?: number
    resolved: boolean
}

export default defineComponent({
    name: 'MogelMotteGame',
    components: {
        CardComponent
    },
    setup() {
        // 游戏状态
        const gameState = ref<'setup' | 'playing' | 'gameOver'>('setup')
        const currentTurn = ref(1)

        // 玩家
        const players = ref<PLAYER[]>([
            { id: 1, name: '玩家 1', hand: [], hasCheated: false },
            { id: 2, name: '玩家 2', hand: [], hasCheated: false },
            { id: 3, name: '玩家 3', hand: [], hasCheated: false },
            { id: 4, name: '玩家 4', hand: [], hasCheated: false }
        ])

        // 守卫虫
        const guardianPlayer = ref<PLAYER | null>(null)

        // 牌堆
        const drawPile = ref<CARD[]>([])
        const discardPile = ref<CARD[]>([])

        // 选择和行动
        const selectedCards = ref<CARD[]>([])
        const pendingAction = ref<PENDING_ACTION | null>(null)
        const showAccuseModal = ref(false)
        const accusedPlayer = ref<PLAYER | null>(null)
        const showSpiderModal = ref(false)
        const spiderTarget = ref<PLAYER | null>(null)

        // 游戏日志
        const gameLog = ref<string[]>([])

        let idCounter = 0

        // 当前玩家（修复：添加空值检查）
        const currentPlayer = computed(() => {
            if (players.value.length === 0) return null
            const playerIndex = (currentTurn.value - 1) % players.value.length
            return players.value[playerIndex]
        })

        // 非守卫虫玩家
        const nonGuardianPlayers = computed(() => {
            return players.value.filter(p => p.id !== guardianPlayer.value?.id)
        })

        // 是否可以出选中的牌
        const canPlaySelectedCards = computed(() => {
            if (!currentPlayer.value) return false
            if (selectedCards.value.length === 0) return false
            if (pendingAction.value) return false

            return selectedCards.value.every(card => canPlayCard(card, currentPlayer.value!))
        })

        // 检查玩家是否活跃（可以操作）
        const isActivePlayer = (player: PLAYER): boolean => {
            if (!currentPlayer.value) return false

            // 如果有pending action，只有特定玩家可以操作
            if (pendingAction.value) {
                if (pendingAction.value.type === 'mosquito') {
                    return true // 所有人都可以点击
                }
                if (pendingAction.value.type === 'spider' && player.id === currentPlayer.value.id) {
                    return true // 只有出蜘蛛牌的玩家可以操作
                }
            }

            // 否则，当前玩家可以操作
            return player.id === currentPlayer.value.id
        }

        // 生成卡牌
        const createCards = (): CARD[] => {
            const cards: CARD[] = []
            const actions: ActionType[] = ['ant', 'spider', 'mosquito', 'cockroach']

            // 数字牌 (1-5)
            for (let i = 1; i <= 5; i++) {
                for (let j = 0; j < 4; j++) {
                    cards.push({
                        id: idCounter++,
                        value: i,
                        type: 'number'
                    })
                }
            }

            // 行动牌
            for (const action of actions) {
                for (let i = 0; i < 3; i++) {
                    cards.push({
                        id: idCounter++,
                        value: 0,
                        type: 'action',
                        actionType: action
                    })
                }
            }

            // 飞蛾牌
            for (let i = 0; i < 4; i++) {
                cards.push({
                    id: idCounter++,
                    value: 0,
                    type: 'moth'
                })
            }

            return cards
        }

        // 洗牌
        const shuffleArray = (array: any[]): void => {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1))
                    ;[array[i], array[j]] = [array[j], array[i]]
            }
        }

        // 格式化卡牌显示
        const formatCard = (card: CARD): string => {
            if (card.type === 'number') {
                return `数字${card.value}`
            } else if (card.type === 'action' && card.actionType) {
                switch (card.actionType) {
                    case 'ant': return '蚂蚁'
                    case 'spider': return '蜘蛛'
                    case 'mosquito': return '蚊子'
                    case 'cockroach': return '蟑螂'
                    default: return '行动牌'
                }
            } else if (card.type === 'moth') {
                return '飞蛾'
            }
            return '未知卡牌'
        }

        // 初始化游戏
        const initializeGame = (): void => {
            // 重置状态
            drawPile.value = createCards()
            discardPile.value = []
            selectedCards.value = []
            pendingAction.value = null
            showAccuseModal.value = false
            accusedPlayer.value = null
            showSpiderModal.value = false
            spiderTarget.value = null

            // 洗牌
            shuffleArray(drawPile.value)

            // 重置玩家手牌
            players.value.forEach(player => {
                player.hand = []
                player.hasCheated = false
            })

            // 分配手牌
            for (let i = 0; i < 5; i++) { // 每位玩家5张牌
                players.value.forEach(player => {
                    if (drawPile.value.length > 0) {
                        player.hand.push(drawPile.value.pop()!)
                    }
                })
            }

            // 随机选择守卫虫
            guardianPlayer.value = players.value[Math.floor(Math.random() * players.value.length)]

            // 翻开第一张牌
            if (drawPile.value.length > 0) {
                const firstCard = drawPile.value.pop()!
                discardPile.value.push(firstCard)
                logAction(`游戏开始，翻开起始牌: ${formatCard(firstCard)}`)
            }
        }

        // 检查是否可以出牌
        const canPlayCard = (card: CARD, player: PLAYER): boolean => {
            if (!currentPlayer.value) return false
            if (player.id !== currentPlayer.value.id) return false
            if (pendingAction.value) return false

            // 守卫虫可以直接出飞蛾牌
            if (player.id === guardianPlayer.value?.id && card.type === 'moth') {
                return true
            }

            // 非飞蛾牌
            if (card.type !== 'moth') {
                if (discardPile.value.length === 0) return true

                const topCard = discardPile.value[discardPile.value.length - 1]

                if (card.type === 'number') {
                    // 数字牌需要与上一张牌的数字相差1（考虑1-5循环）
                    const currentVal = card.value
                    const topVal = topCard.value

                    // 检查差值是否为1，或处理1和5的特殊情况
                    return Math.abs(currentVal - topVal) === 1 ||
                        (currentVal === 1 && topVal === 5) ||
                        (currentVal === 5 && topVal === 1)
                } else {
                    // 行动牌总是可以出
                    return true
                }
            }

            return false
        }

        // 选择卡牌
        const selectCard = (card: CARD, player: PLAYER): void => {
            if (!currentPlayer.value) return
            if (player.id !== currentPlayer.value.id || pendingAction.value) return

            const index = selectedCards.value.indexOf(card)
            if (index === -1) {
                // 添加到选择（每次只能选一张）
                selectedCards.value = [card]
            } else {
                // 从选择中移除
                selectedCards.value = []
            }
        }

        // 抽牌给当前玩家
        const drawCardForCurrentPlayer = (): void => {
            if (!currentPlayer.value) return

            drawCard(currentPlayer.value)
        }

        // 抽牌
        const drawCard = (player: PLAYER): void => {
            if (drawPile.value.length > 0) {
                const card = drawPile.value.pop()!
                player.hand.push(card)
                logAction(`${player.name} 从牌堆抽了一张牌`)
            } else {
                // 牌堆为空，游戏结束
                logAction(`牌堆已空，游戏结束`)
                endGame()
            }
        }

        // 出牌
        const playSelectedCards = (): void => {
            if (!canPlaySelectedCards.value || selectedCards.value.length === 0 || !currentPlayer.value) return

            const player = currentPlayer.value
            const card = selectedCards.value[0]

            // 移除手牌
            const cardIndex = player.hand.indexOf(card)
            if (cardIndex !== -1) {
                player.hand.splice(cardIndex, 1)
            }

            // 添加到弃牌堆
            discardPile.value.push(card)
            logAction(`${player.name} 出了 ${formatCard(card)}`)

            // 检查游戏是否结束
            if (player.hand.length === 0) {
                endGame()
                return
            }

            // 处理行动牌效果
            if (card.type === 'action' && card.actionType) {
                handleActionCard(card, player)
            }

            // 清空选择
            selectedCards.value = []

            // 下一回合
            if (!pendingAction.value) {
                nextTurn()
            }
        }

        // 处理行动牌
        const handleActionCard = (card: CARD, player: PLAYER): void => {
            if (!card.actionType) return

            switch (card.actionType) {
                case 'ant':
                    pendingAction.value = {
                        type: 'ant',
                        sourcePlayer: player,
                        resolved: false
                    }
                    logAction(`蚂蚁行动: 其他玩家需要抽一张牌`)

                    // 让其他玩家抽牌
                    players.value.forEach(p => {
                        if (p.id !== player.id) {
                            drawCard(p)
                        }
                    })

                    // 立即结束行动
                    pendingAction.value = null
                    nextTurn()
                    break

                case 'spider':
                    pendingAction.value = {
                        type: 'spider',
                        sourcePlayer: player,
                        resolved: false
                    }
                    showSpiderModal.value = true
                    logAction(`蜘蛛行动: ${player.name} 可以赠送一张牌给其他玩家`)
                    break

                case 'mosquito':
                    pendingAction.value = {
                        type: 'mosquito',
                        sourcePlayer: player,
                        resolved: false
                    }
                    logAction(`蚊子行动: 所有玩家快速点击，最后一个点击的人将接收牌`)
                    break

                case 'cockroach':
                    pendingAction.value = {
                        type: 'cockroach',
                        sourcePlayer: player,
                        targetValue: card.value, // 使用当前卡牌的值
                        resolved: false
                    }
                    logAction(`蟑螂行动: 找出与 ${card.value} 相同的牌`)
                    break
            }
        }

        // 尝试作弊
        const attemptCheat = (player: PLAYER): void => {
            if (!currentPlayer.value) return
            if (player.id === guardianPlayer.value?.id || player.hand.length === 0) return

            // 简单的作弊机制：标记玩家已作弊
            player.hasCheated = true
            logAction(`${player.name} 尝试作弊`)
        }

        // 守卫虫指控
        const accusePlayer = (): void => {
            if (!currentPlayer.value) return
            if (currentPlayer.value.id !== guardianPlayer.value?.id) return
            showAccuseModal.value = true
        }

        // 确认指控
        const confirmAccusation = (player: PLAYER): void => {
            showAccuseModal.value = false
            accusedPlayer.value = player

            if (player.hasCheated) {
                // 指控成功
                logAction(`守卫虫 ${guardianPlayer.value?.name} 成功指控 ${player.name} 作弊！`)

                // 作弊玩家收回所有作弊的牌
                logAction(`${player.name} 收回了作弊的牌`)

                // 作弊玩家从守卫虫那里拿一张牌作为惩罚
                if (guardianPlayer.value && guardianPlayer.value.hand.length > 0) {
                    const penaltyCard = guardianPlayer.value.hand.pop()!
                    player.hand.push(penaltyCard)
                    logAction(`${player.name} 从守卫虫那里获得惩罚牌: ${formatCard(penaltyCard)}`)
                }

                // 守卫虫位置转移
                guardianPlayer.value = player
                logAction(`${player.name} 成为新的守卫虫`)
            } else {
                // 指控失败
                logAction(`守卫虫 ${guardianPlayer.value?.name} 错误指控 ${player.name}，失去了守卫虫的位置！`)

                // 守卫虫位置转移
                guardianPlayer.value = player
            }

            // 结束指控后的回合
            nextTurn()
        }

        // 取消指控
        const cancelAccusation = (): void => {
            showAccuseModal.value = false
            accusedPlayer.value = null
        }

        // 选择蜘蛛牌目标
        const selectSpiderTarget = (targetPlayer: PLAYER): void => {
            showSpiderModal.value = false
            spiderTarget.value = targetPlayer

            // 让出蜘蛛牌的玩家选择要赠送的牌
            const currentPlayerVal = currentPlayer.value
            if (!currentPlayerVal) return

            logAction(`${currentPlayerVal.name} 选择将赠送一张牌给 ${targetPlayer.name}`)

            // 选择一张非飞蛾牌赠送
            const nonMothCards = currentPlayerVal.hand.filter(c => c.type !== 'moth')
            if (nonMothCards.length > 0) {
                const cardToGive = nonMothCards[0] // 简化：选择第一张非飞蛾牌
                const cardIndex = currentPlayerVal.hand.indexOf(cardToGive)
                if (cardIndex !== -1) {
                    currentPlayerVal.hand.splice(cardIndex, 1)
                    targetPlayer.hand.push(cardToGive)
                    logAction(`${currentPlayerVal.name} 赠送了 ${formatCard(cardToGive)} 给 ${targetPlayer.name}`)
                }
            }

            // 清除pending action
            pendingAction.value = null

            // 下一回合
            nextTurn()
        }

        // 取消蜘蛛选择
        const cancelSpiderSelection = (): void => {
            showSpiderModal.value = false
            spiderTarget.value = null
            pendingAction.value = null
            nextTurn()
        }

        // 处理蚊子点击
        const handleMosquitoClick = (): void => {
            if (!pendingAction.value || pendingAction.value.type !== 'mosquito' || !currentPlayer.value) return

            // 记录点击
            logAction(`${currentPlayer.value.name} 响应了蚊子行动`)

            // 简化处理：直接结束蚊子行动
            const sourcePlayer = pendingAction.value.sourcePlayer
            const topCard = discardPile.value.pop()!
            sourcePlayer.hand.push(topCard)
            logAction(`蚊子行动结束，${sourcePlayer.name} 收回了牌`)

            pendingAction.value = null
            nextTurn()
        }

        // 下一回合
        const nextTurn = (): void => {
            if (!currentPlayer.value) return

            // 检查当前玩家是否需要抽牌（没有出牌）
            const lastDiscard = discardPile.value[discardPile.value.length - 1]
            if (lastDiscard && lastDiscard.id !== selectedCards.value[0]?.id) {
                drawCard(currentPlayer.value)
            }

            // 重置选择
            selectedCards.value = []

            // 进入下一回合
            currentTurn.value++
        }

        // 计算分数
        const calculateScore = (player: PLAYER): number => {
            let score = 0

            for (const card of player.hand) {
                if (card.type === 'number') {
                    score -= 1
                } else if (card.type === 'action') {
                    score -= 5
                } else if (card.type === 'moth') {
                    score -= 10
                }
            }

            return score
        }

        // 结束游戏
        const endGame = (): void => {
            gameState.value = 'gameOver'
            logAction("游戏结束！")
        }

        // 开始游戏
        const startGame = (): void => {
            console.log('开始游戏按钮被点击')
            gameState.value = 'playing'
            currentTurn.value = 1
            gameLog.value = []

            initializeGame()
            logAction("游戏开始")
        }

        // 重置游戏
        const resetGame = (): void => {
            console.log('重置游戏')
            gameState.value = 'setup'
            currentTurn.value = 1
            gameLog.value = []
            selectedCards.value = []
            pendingAction.value = null
            showAccuseModal.value = false
            accusedPlayer.value = null
            showSpiderModal.value = false
            spiderTarget.value = null
            guardianPlayer.value = null

            // 重置玩家状态
            players.value.forEach(player => {
                player.hand = []
                player.hasCheated = false
            })

            drawPile.value = []
            discardPile.value = []
        }

        // 添加游戏日志
        const logAction = (message: string): void => {
            gameLog.value.unshift(`${currentTurn.value}回合: ${message}`)
            if (gameLog.value.length > 20) {
                gameLog.value.pop()
            }
        }

        // 排序后的玩家（按分数）
        const sortedPlayers = computed(() => {
            return [...players.value].sort((a, b) =>
                calculateScore(b) - calculateScore(a)
            )
        })

        // 调试：在组件挂载时输出状态
        onMounted(() => {
            console.log('组件已挂载')
            console.log('初始玩家:', players.value)
        })

        return {
            gameState,
            currentTurn,
            players,
            guardianPlayer,
            drawPile,
            discardPile,
            selectedCards,
            pendingAction,
            showAccuseModal,
            accusedPlayer,
            showSpiderModal,
            spiderTarget,
            gameLog,
            currentPlayer,
            nonGuardianPlayers,
            canPlaySelectedCards,
            sortedPlayers,

            startGame,
            selectCard,
            playSelectedCards,
            drawCardForCurrentPlayer,
            drawCard,
            attemptCheat,
            accusePlayer,
            confirmAccusation,
            cancelAccusation,
            selectSpiderTarget,
            cancelSpiderSelection,
            handleMosquitoClick,
            nextTurn,
            calculateScore,
            endGame,
            resetGame,
            isActivePlayer
        }
    }
})
</script>

<style lang="scss" scoped>
$mogel-primary: #3498db;
$mogel-secondary: #e74c3c;
$mogel-success: #2ecc71;
$mogel-warning: #f39c12;
$mogel-purple: #9b59b6;
$mogel-dark: #34495e;
$mogel-light: #ecf0f1;

.mogel-motte-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;

    .game-header {
        text-align: center;
        margin-bottom: 20px;

        h1 {
            color: $mogel-primary;
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .game-info {
            display: flex;
            justify-content: center;
            gap: 30px;
            color: $mogel-dark;
            font-weight: bold;
            font-size: 18px;

            .guardian {
                color: $mogel-warning;
            }
        }
    }

    .game-board {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: auto 1fr auto;
        gap: 20px;

        @media (max-width: 900px) {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto 1fr auto;
        }

        .center-area {
            grid-column: 1;
            grid-row: 1 / 3;
            background-color: $mogel-light;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .deck-area {
                display: flex;
                gap: 30px;
                margin-bottom: 20px;

                .deck {
                    width: 80px;
                    height: 120px;
                    background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%);
                    border: 2px solid $mogel-dark;
                    border-radius: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    transition: all 0.3s ease;

                    &:hover {
                        transform: translateY(-5px);
                        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
                    }

                    .card-count {
                        font-size: 24px;
                        font-weight: bold;
                        color: white;
                        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
                    }

                    .deck-label {
                        font-size: 14px;
                        color: white;
                        margin-top: 5px;
                    }
                }

                .discard-pile {
                    position: relative;
                    width: 80px;
                    height: 120px;

                    .discard-card {
                        position: absolute;
                        transition: transform 0.3s ease;
                    }
                }
            }

            .action-prompt {
                background-color: $mogel-warning;
                color: $mogel-dark;
                padding: 15px;
                border-radius: 10px;
                text-align: center;
                font-weight: bold;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

                .action-message {
                    font-size: 18px;
                }
            }
        }

        .players-area {
            grid-column: 2;
            grid-row: 1 / 3;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;

            @media (max-width: 900px) {
                grid-template-columns: 1fr;
            }

            .player {
                background-color: $mogel-light;
                padding: 20px;
                border-radius: 15px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                transition: all 0.3s ease;

                &.current {
                    border: 3px solid $mogel-primary;
                    padding: 17px;
                    transform: scale(1.02);
                }

                &.guardian {
                    border: 3px solid $mogel-warning;
                    background: linear-gradient(135deg, #fff5e6 0%, #ffeaa7 100%);
                }

                &.active {
                    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
                }

                .player-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 15px;

                    h3 {
                        color: $mogel-dark;
                        margin: 0;
                    }

                    .guardian-badge {
                        background-color: $mogel-warning;
                        color: $mogel-dark;
                        padding: 5px 10px;
                        border-radius: 15px;
                        font-size: 12px;
                        font-weight: bold;
                    }

                    .hand-count {
                        font-size: 14px;
                        color: #666;
                    }
                }

                .player-hand {
                    min-height: 150px;
                    display: flex;
                    flex-wrap: wrap;
                    gap: 8px;
                    margin-bottom: 15px;

                    .player-card {
                        cursor: pointer;
                        transition: all 0.2s ease;

                        &.selectable {
                            transform: translateY(-5px);

                            &:hover {
                                transform: translateY(-8px);
                            }
                        }

                        &.selected {
                            border: 3px solid $mogel-success;
                            transform: translateY(-10px) !important;
                            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
                        }

                        &.moth {
                            opacity: 0.8;
                        }

                        &.action {
                            border-color: $mogel-purple;
                        }

                        &.number {
                            border-color: $mogel-primary;
                        }
                    }
                }

                .cheat-actions {
                    text-align: center;

                    .cheat-button {
                        background-color: $mogel-secondary;
                        color: white;
                        border: none;
                        padding: 8px 16px;
                        border-radius: 20px;
                        cursor: pointer;
                        font-size: 14px;
                        transition: all 0.3s ease;

                        &:hover {
                            background-color: darken($mogel-secondary, 10%);
                        }
                    }
                }

                .guardian-actions {
                    text-align: center;

                    .accuse-button {
                        background-color: $mogel-warning;
                        color: $mogel-dark;
                        border: none;
                        padding: 8px 16px;
                        border-radius: 20px;
                        cursor: pointer;
                        font-size: 14px;
                        font-weight: bold;
                        transition: all 0.3s ease;

                        &:hover {
                            background-color: darken($mogel-warning, 10%);
                        }
                    }
                }
            }
        }

        .game-controls {
            grid-column: 1 / 3;
            grid-row: 3;
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;

            button {
                padding: 12px 24px;
                background-color: $mogel-primary;
                color: white;
                border: none;
                border-radius: 8px;
                font-size: 16px;
                cursor: pointer;
                transition: all 0.3s ease;

                &:hover:not(:disabled) {
                    background-color: darken($mogel-primary, 10%);
                    transform: translateY(-2px);
                }

                &:disabled {
                    background-color: #ccc;
                    cursor: not-allowed;
                    transform: none;
                }
            }
        }

        .game-log {
            grid-column: 1 / 3;
            grid-row: 4;
            background-color: $mogel-light;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-top: 20px;

            h3 {
                color: $mogel-dark;
                margin-bottom: 15px;
            }

            .log-entries {
                max-height: 180px;
                overflow-y: auto;

                .log-entry {
                    padding: 8px 0;
                    border-bottom: 1px solid #ddd;
                    font-size: 14px;
                    color: $mogel-dark;

                    &:last-child {
                        border-bottom: none;
                    }
                }
            }
        }
    }

    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;

        .modal-content {
            background-color: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            max-width: 400px;
            width: 90%;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);

            h3 {
                color: $mogel-dark;
                margin-top: 0;
                margin-bottom: 20px;
            }

            .accuse-players,
            .spider-players {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-bottom: 20px;
            }

            .accuse-player,
            .spider-player {
                padding: 10px;
                background-color: $mogel-light;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.3s ease;

                &:hover {
                    background-color: $mogel-primary;
                    color: white;
                }
            }

            button {
                padding: 10px 20px;
                background-color: $mogel-primary;
                color: white;
                border: none;
                border-radius: 8px;
                cursor: pointer;

                &:hover {
                    background-color: darken($mogel-primary, 10%);
                }
            }
        }
    }

    .game-over-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;

        .modal-content {
            background-color: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);

            h2 {
                color: $mogel-primary;
                margin-top: 0;
                margin-bottom: 20px;
            }

            .final-scores {
                margin: 20px 0;

                .player-score-final {
                    padding: 12px;
                    margin: 8px 0;
                    background-color: #f8f9fa;
                    border-radius: 8px;
                    font-size: 18px;

                    &:nth-child(odd) {
                        background-color: #e9ecef;
                    }
                }
            }

            button {
                padding: 12px 24px;
                background-color: $mogel-primary;
                color: white;
                border: none;
                border-radius: 8px;
                font-size: 16px;
                cursor: pointer;

                &:hover {
                    background-color: darken($mogel-primary, 10%);
                }
            }
        }
    }
}
</style>